<!DOCTYPE html>
<html>

<head>
    <title></title>
    <style type="text/css">
        .current{
            background-color: #00625A !important;
        }
    </style>

    <!--<link href="/static/css/layout.css" rel="stylesheet" type="text/css">-->
    <!--<link href="/static/css/default.css" rel="stylesheet" type="text/css">-->
    <!--<link href="/static/css/iconfont.css" rel="stylesheet" type="text/css">-->
    <!--<link href="/static/css/skin.css" rel="stylesheet" type="text/css">-->

    <link href="/static/css/index.css" rel="stylesheet" type="text/css">
    <link href="/static/css/controls.css" rel="stylesheet" type="text/css">
</head>

<body ng-controller="TestCtrl">


    <div class="wrapper skin">
        <!--搜索边框多列联想输入校验-->
        <div class="section" style="padding-bottom: 100px">
            <div class="section_header">
                联想控件
            </div>
            <div class="section_body">
                <ul class="control_List">
                    <!--<li>
                        <input type="text" class="inp-text inp-auto br-focus" value="">
                    </li>-->
                    <g-data-source
                            url="/gillion-web/system/users/getPage"
                            page-size="10"
                            current-page="1"
                            records-prop="data.records"
                            total-page-field = "data.totalPage"
                            data-params="testParams"
                            data-source-name="source1"
                            total-record-prop="data.totalRecord"
                            current-page-param="page"
                            allow-auto-load = "true"
                            page="true"
                            >
                    </g-data-source>
                    <li>
                        source-name:数据源名 跟g-data-source指令对应</br>
                        value-separator:多条数据分隔符 默认为','</br>
                        keyword-prop:关键词的名称 即发送到后台的请求参数名 默认'keyword'</br>
                        multi:是否多选  默认为false</br>
                        empty-search:当关键词是空的时候 是否发送请求 默认是false</br>
                        delay-time: 输入时 请求延迟 默认是300ms</br>
                        display-express:数据源中的显示字段</br>
                        value-prop:数据源中的隐藏字段</br>
                        selected-row:已选行数据</br>
                        width:宽度
                    </li>
                    <li>
                        子指令 g-associate-column 说明:</br>
                        用于设置表格头部字段名称和过滤器</br>
                        width:宽度</br>
                        display-express:对应字段名称</br>
                        filter-name:过滤器名称 多个用'|'隔开</br>
                    </li>
                    <li>
                    关联指令 g-data-bind 说明:</br>
                    用于设置与联想控件已勾选显示的对应字段</br>
                    g-data-bind:关联的名称 应该与联想控件selected-row属性对应 </br>
                    value-prop:对应字段名称</br>
                    value-separator:多条数据分隔符 默认为','</br>
                    cascade:是否级联 即输入框修改 联想控件随之改动 默认为true</br>
                    </li>

                    <li style="width:100%"><div style="width:300px"></div></br></li>
                    <li>
                        <input type="text" style="width: 100%" ng-model="display"/>
                       多选： <g-associate ng-cloak data-source-name="source1" keyword-prop="keyword" selected-row="selectedRow2" multi="true" delay-time="400"  ng-model="display" display-express="username" value-prop="userId">
                            <g-associate-column width="200px" display-express="userId" filter-name="uppercase|uppercase">客户编号</g-associate-column>
                            <g-associate-column width="100px" display-express="username" >用户名</g-associate-column>
                            <g-associate-column display-express="password" filter-name="uppercase">密码</g-associate-column>
                        </g-associate>
                        绑定username:<input g-data-bind="selectedRow2" value-prop="username" ng-model="other2"/>
                        绑定userId:<input g-data-bind="selectedRow2" value-prop="userId" ng-model="other3"/>
                    </li>

                    <li style="width:100%"><input type="text" style="width: 100%" ng-model="display2"/></li>
                    <li>
                        单选：<g-associate ng-cloak data-source-name="source1" keyword-prop="keyword" selected-row="selectedRow1" delay-time="400"  ng-model="display2" display-express="username" value-prop="userId">
                            <g-associate-column width="200px" display-express="userId" filter-name="uppercase|uppercase">客户编号</g-associate-column>
                            <g-associate-column width="100px" display-express="username" >用户名</g-associate-column>
                            <g-associate-column display-express="password" filter-name="uppercase">密码</g-associate-column>
                        </g-associate>
                        <input g-data-bind="selectedRow1" value-prop="username" ng-model="other">
                    </li>
                </ul>
            </div>
        </div>
        <!--搜索边框多列联想输入校验-->
    </div>
</body>


<script>
    var ctx = '';
    var basePath = '/gillion-web';
    var locale = 'zh-cn'
</script>
<script src="/bower_components/requirejs/require.js" data-main="/static/app.js" data-bootstrap-modules="'../../html/demo/associate/testAssociateModule'"></script>


</html>
